@import '@liam-hq/ui/src/styles/globals.css' layer(base);

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* biome-ignore lint/suspicious/noUnknownAtRules: @source is a Tailwind CSS v4 directive for importing component styles */
@source '../node_modules/fumadocs-ui/dist/**/*.js';

/* biome-ignore lint/suspicious/noUnknownAtRules: @theme is a Tailwind CSS v4 directive for defining theme configuration */
@theme {
  --color-liam-green-300: hsl(var(--liam-green-300));
  --color-liam-green-400: hsl(var(--liam-green-400));
  --color-liam-green-700: hsl(var(--liam-green-700));

  --color-base-black: hsl(var(--base-black));
  --color-base-white: hsl(var(--base-white));
  --color-primary-background: var(--primary-background);
  --color-warn: hsl(var(--warn));
  --color-danger: hsl(var(--danger));
}

@layer utilities {
  .prose {
    --tw-prose-body: hsl(var(--fd-foreground) / 0.9);
    --tw-prose-headings: hsl(var(--fd-foreground) / 1);
    --tw-prose-lead: hsl(var(--fd-foreground) / 1);
    --tw-prose-links: hsl(var(--fd-primary) / 1);
    --tw-prose-bold: hsl(var(--fd-foreground) / 1);
    --tw-prose-counters: hsl(var(--fd-muted-foreground) / 1);
    --tw-prose-bullets: hsl(var(--fd-muted-foreground) / 1);
    --tw-prose-hr: hsl(var(--fd-border) / 1);
    --tw-prose-quotes: hsl(var(--fd-foreground) / 1);
    --tw-prose-quote-borders: hsl(var(--fd-border) / 1);
    --tw-prose-captions: hsl(var(--fd-foreground) / 1);
    --tw-prose-code: hsl(var(--fd-foreground) / 1);
    --tw-prose-th-borders: hsl(var(--fd-border) / 1);
    --tw-prose-td-borders: hsl(var(--fd-border) / 1);
    --tw-prose-kbd: hsl(var(--fd-foreground) / 1);
    --tw-prose-kbd-shadows: hsl(var(--fd-primary) / 0.5);
  }
}

@layer base {
  /* Color Primitive */
  :root {
    --liam-gray-0: 0 0% 100%;
    --liam-gray-5: 0 0% 97%;
    --liam-gray-10: 0 0% 94%;
    --liam-gray-30: 220 7% 91%;
    --liam-gray-40: 210 3% 87%;
    --liam-gray-50: 210 2% 82%;
    --liam-gray-100: 220 2% 75%;
    --liam-gray-400: 206 4% 39%;
    --liam-gray-500: 200 2% 27%;
    --liam-gray-600: 200 3% 23%;
    --liam-gray-700: 200 3% 23%;
    --liam-gray-800: 200 3% 19%;
    --liam-gray-900: 200 4% 14%;
    --liam-gray-1000: 180 5% 8%;
    --liam-gray-1100: 180 5% 6%;

    --liam-green-10: 135 67% 99%;
    --liam-green-50: 145 100% 97%;
    --liam-green-80: 135 100% 94%;
    --liam-green-100: 136 100% 89%;
    --liam-green-200: 148 97% 85%;
    --liam-green-300: 149 86% 62%;
    --liam-green-400: 149 85% 52%;
    --liam-green-500: 145 56% 49%;
    --liam-green-600: 150 100% 26%;
    --liam-green-700: 143 49% 18%;
    --liam-green-950: 152 100% 10%;

    --base-black: 0 0% 0%;
    --base-white: 0 0% 100%;
  }

  /* Color Semantics */
  :root {
    --primary-background: hsl(149 85% 52% / 0.05);
    --warn: 37 95% 53%;
    --danger: 2 92% 63%;

    /* Overrides for Fumadocs */
    --color-fd-background: hsl(0 0% 98%);
    --color-fd-foreground: hsl(var(--liam-gray-1000));
    --color-fd-muted: hsl(var(--liam-gray-5));
    --color-fd-muted-foreground: hsl(var(--liam-gray-600));
    --color-fd-popover: hsl(var(--base-white));
    --color-fd-popover-foreground: hsl(var(--liam-gray-800));
    --color-fd-card: hsl(var(--base-white));
    --color-fd-card-foreground: hsl(var(--liam-gray-1000));
    --color-fd-border: hsl(var(--liam-gray-30));
    --color-fd-primary: hsl(var(--liam-green-600));
    --color-fd-primary-foreground: hsl(var(--base-black));
    --color-fd-secondary: hsl(var(--liam-gray-10));
    --color-fd-secondary-foreground: hsl(var(--liam-gray-500));
    --color-fd-accent: hsl(var(--liam-gray-50));
    --color-fd-accent-foreground: hsl(var(--liam-gray-500));

    --fd-ring: 221 83% 53%;
  }

  .dark {
    --primary-background: hsl(149 85% 52% / 0.1);
    --warn: 47 100% 64%;

    /* Overrides for Fumadocs */
    --color-fd-background: hsl(var(--liam-gray-1100));
    --color-fd-foreground: hsl(var(--liam-gray-0));
    --color-fd-muted: hsl(var(--liam-gray-900));
    --color-fd-muted-foreground: hsl(var(--liam-gray-100));
    --color-fd-popover: hsl(var(--liam-gray-1000));
    --color-fd-popover-foreground: hsl(var(--liam-gray-0));
    --color-fd-card: hsl(var(--liam-gray-1000));
    --color-fd-card-foreground: hsl(var(--liam-gray-0));
    --color-fd-border: hsl(var(--liam-gray-800));
    --color-fd-primary: hsl(var(--liam-green-400));
    --color-fd-primary-foreground: hsl(var(--base-black));
    --color-fd-secondary: hsl(var(--liam-gray-600));
    --color-fd-secondary-foreground: hsl(var(--liam-gray-10));
    --color-fd-accent: hsl(var(--liam-gray-800));
    --color-fd-accent-foreground: hsl(var(--liam-gray-30));
  }

  /* Overrides for Fumadocs package-install component */
  div[role='tabpanel'] figure {
    background-color: var(--fd-secondary) !important;
  }

  div[role='tablist'] {
    background-color: hsl(var(--fd-muted)) !important;
  }
}
